<template>
	<view class="content">
		<view class="top">
			<view class="address" type="text" placeholder="请选择地区">
				<picker mode="multiSelector" :range="newProvinceDataList" :value="multiIndex" @change="pickerChange"
					@columnchange="pickerColumnchange">
					<view>{{select}}</view>
				</picker>
			</view>
			<view class="search" @click="GoSearch">
				<text class="serch-inp">搜索商品</text>
				<view class="serch-test">搜索</view>
			</view>
		</view>

		<swiper class="swiper" :indicator-active-color="activeColor" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<image class="swiperimg" src="../../static/img/banner1.png" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiperimg" src="../../static/img/banner3.jpg" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiperimg" src="../../static/img/banner4.jpg" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<view class="mokuai">
			<uni-grid :column="5" :showBorder="false" :square="false">
				<uni-grid-item class="lisites">
					<view class="bjimg" @click="GoProductlist(1)">
						<image class="img" src="../../static/img/fl2.png" mode=""></image>
					</view>
					<view class="text">鲜花</view>
				</uni-grid-item>
				<uni-grid-item class="lisites">
					<view class="bjimg" @click="GoProductlist(2)">
						<image class="img" src="../../static/img/fl5.png" mode=""></image>
					</view>
					<view class="text">永生花</view>
				</uni-grid-item>
				<uni-grid-item class="lisites">
					<view class="bjimg" @click="GoProductlist(3)">
						<image class="img" src="../../static/img/fl1.png" mode=""></image>
					</view>
					<view class="text">蛋糕</view>
				</uni-grid-item>
				<uni-grid-item class="lisites">
					<view class="bjimg" @click="GoProductlist(4)">
						<image class="img" src="../../static/img/fl.png" mode=""></image>
					</view>
					<view class="text">礼品</view>
				</uni-grid-item>
				<uni-grid-item class="lisites">
					<view class="bjimg" @click="GoProductlist(5)">
						<image class="img" src="../../static/img/fl3.png" mode=""></image>
					</view>
					<view class="text">卡片</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<view class="ThPart">
			<uni-grid :column="3" :showBorder="false" :square="false">
				<uni-grid-item>
					<view class="listpart" @click="GoProductlists(1)">
						<view class="up">
							<uni-icons type="fire-filled" size="26" color="#ff6b6a"></uni-icons>
							<view class="title">热销榜单</view>
							<uni-icons type="forward" size="20" color="#c4c3c3"></uni-icons>
						</view>
						<view class="red">等你来袭</view>
						<image class="img" src="../../static/img/rexiao1.jpg" mode=""></image>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="listpart" @click="GoProductlists(2)">
						<view class="up">
							<uni-icons type="map-filled" size="24" color="#ff6b6a"></uni-icons>
							<view class="title">特价专区</view>
							<uni-icons type="forward" size="20" color="#c4c3c3"></uni-icons>
						</view>
						<view class="red">韩式系列</view>
						<image class="img" src="../../static/img/rexiao3.jpg" mode=""></image>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="listpart" @click="GoProductlists(3)">
						<view class="up">
							<uni-icons type="gift-filled" size="24" color="#ff6b6a"></uni-icons>
							<view class="title">毕业季</view>
							<uni-icons type="forward" size="20" color="#c4c3c3"></uni-icons>
						</view>
						<view class="red">永不散场</view>
						<image class="img" src="../../static/img/rexiao2.jpg" mode=""></image>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<uni-grid :column="2" :showBorder="false" :square="false">
			<uni-grid-item class="lisitem" v-for="(item,index) in productsList" :key="index">
				<view @click="Godetails(item.bh)">
					<image class="img" :src="item.xhtp" mode=""></image>
					<view class="text">{{item.xhmc}}</view>
					<view class="bottom">
						<view class="price">￥{{item.xhyjjg}}</view>
						<view class="sum">已销售{{item.xhxl}}件</view>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import provinceData from "@/pages-index/provinceAndCity.js"
	import {
		addressdata
	} from "../../common/list.js"
	export default {
		data() {
			return {
				title: 'Hello',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1000,
				activeColor: "white",
				oldpProvinceDataList: provinceData.data,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: "位置",
				productsList: '', //最下面的商品
			}
		},
		onLoad() {
			// 开始省市区默认数据
			var _this = this
			// 省
			for (let i = 0; i < _this.oldpProvinceDataList.length; i++) {
				_this.newProvinceDataList[0].push(_this.oldpProvinceDataList[i].name)
			}
			// 市
			for (let i = 0; i < _this.oldpProvinceDataList[0].city.length; i++) {
				_this.newProvinceDataList[1].push(_this.oldpProvinceDataList[0].city[i].name)
			}
			// 区县
			for (let i = 0; i < _this.oldpProvinceDataList[0].city[0].area.length; i++) {
				_this.newProvinceDataList[2].push(_this.oldpProvinceDataList[0].city[0].area[i])
			}

		},
		onShow() {
			// this.addRess()
			this.getHot()
		},
		mounted() {
			this.addRess()
		},
		methods: {
			getHot() {

				this.requestfs({
					url: '/mall/goods/selectHotList?type=' + ''
				}).then(res => {
					if (res.data.msg == "success") {
						this.productsList = res.data.data


					}
				})
			},
			GoProductlist(name) {
				var keyWord = '鲜花'
				if (name == 1) {
					keyWord = '鲜花'
				} else if (name == 2) {
					keyWord = '永生花'
				} else if (name == 3) {
					keyWord = '蛋糕'
				} else if (name == 4) {
					keyWord = '礼品'
				} else if (name == 5) {
					keyWord = '卡片'
				}

				uni.navigateTo({
					url: '/pages-index/IndexproductsList/IndexproductsList?keyWord=' + keyWord
				})
			},
			GoProductlists(name) {
				var keyWord = '热销榜单'
				if (name == 1) {
					keyWord = '热销榜单'
				} else if (name == 2) {
					keyWord = '特价专区'
				} else if (name == 3) {
					keyWord = '毕业季'
				}

				uni.navigateTo({
					url: '/pages-index/IndexproductsList/IndexproductsList?keyWord=' + keyWord
				})
			},
			GoSearch() {
				uni.navigateTo({
					url: '/pages-index/IndexSearch/IndexSearch'
				})
			},
			addRess() {
				addressdata()
					.then((res) => {
						//拿到“区”
						this.select = res.result.address_component.district
					})
					.catch((err) => {
						//获取失败就在页面显示“位置”
						this.select = '位置'
					})
			}, // 省市区确认事件
			pickerChange: function(e) {
				var _this = this
				_this.multiIndex = e.detail.value
				// 数组内的下标
				_this.select =
					_this.newProvinceDataList[2][_this.multiIndex[2]]

				// this.datalist()
			},
			// 每列滑动的监听
			pickerColumnchange: function(e) {
				var _this = this
				// 第一列滑动
				if (e.detail.column === 0) {
					_this.multiIndex[0] = e.detail.value
					// 第二列更新相应的数据
					_this.newProvinceDataList[1] = _this.oldpProvinceDataList[_this.multiIndex[0]].city.map((item,
						index) => {
						return item.name
					})
					if (_this.oldpProvinceDataList[_this.multiIndex[0]].city.length === 1) {
						_this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[0].area
							.map((
								item,
								index) => {
								return item
							})
					} else {
						_this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[_this
							.multiIndex[
								1]].area.map((item, index) => {
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					_this.multiIndex.splice(1, 1, 0)
					_this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					_this.multiIndex[1] = e.detail.value
					_this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[_this
						.multiIndex[
							1]].area.map((item, index) => {
						return item
					})
					// 第二列 滑动 第三列 变成第一个
					_this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					_this.multiIndex[2] = e.detail.value
				}
			},
			Godetails(bh) {
				uni.navigateTo({
					url: '/pages-classify/productsdetails/productsdetails?bh=' + bh
				})


			}

		}
	}
</script>

<style lang="scss">
	.content {
		background: #f3f5f7;
		min-height: 100vh;
		height: auto;
		width: 750rpx;
		padding-top: 20rpx;

		.top {
			display: flex;
			height: 60rpx;
			line-height: 60rpx;

			.address {
				width: 200rpx;
				font-size: 30rpx;
				text-align: center;
				color: #c4c3c3;
				overflow: hidden;
			}

			.search {
				width: 510rpx;
				margin: 0 13rpx;
				border: 2px solid #ef5e25;
				border-radius: 50rpx;
				display: flex;

				.serch-inp {
					width: 71.5%;
					height: 60rpx;
					padding-left: 10%;
					color: #c4c3c3;
					font-size: 28rpx;
				}

				.serch-test {
					width: 18%;
					background-image: linear-gradient(to right, rgba(237, 127, 48, 0.8), rgba(236, 96, 45, 1));
					color: #ffffff;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 50rpx;
					text-align: center;
					margin-top: 2rpx;
					font-size: 26rpx;
				}
			}

		}

		.swiper {
			width: 96%;
			margin: 20rpx 2%;
			border-radius: 20rpx;

			.swiperimg {
				width: 100%;
				height: 360rpx;
				// border-radius: 20rpx;
			}
		}

		.mokuai {
			width: 96%;
			margin: 20rpx 2%;
			border-radius: 20rpx;
			background: #ffffff;

			.lisites {
				text-align: center;
				padding: 20rpx 0;

				.bjimg {
					margin: 10rpx auto 0 auto;
					width: 90rpx;
					height: 90rpx;
					text-align: center;
					background-image: linear-gradient(to right, rgba(234, 235, 239, 0.5), rgba(206, 207, 217, 0.8));
					border-radius: 28rpx;
					color: #333;

					.img {
						width: 50rpx;
						height: 50rpx;
						margin-top: 20rpx;
						z-index: 100;
					}
				}
			}

		}

		.ThPart {
			width: 96%;
			margin: 20rpx 2%;
			background: #ffffff;
			border-radius: 10rpx;

			.listpart {
				padding: 30rpx 5rpx;

				.up {
					display: flex;
					height: 60rpx;
					width: 95%;

					.title {
						color: black;
						font-weight: bold;
						margin-top: -30rpx;
					}
				}

				.img {
					width: 80%;
					height: 200rpx;
					margin: 16rpx 10% 0 10%;
				}

				.red {
					background: #ff6b6a;
					margin-left: 35%;
					width: 50%;
					text-align: center;
					padding: 4rpx;
					color: #ffffff;
					font-size: 18rpx;
					border-radius: 40rpx;
					margin-top: -10rpx;
				}
			}
		}

		.lisitem {
			background: #ffffff;
			width: 46%;
			margin: 0 2% 20rpx 2%;
			border-radius: 10rpx;

			.bottom {
				margin: 0 10rpx 10rpx 10rpx;

				.price {
					width: 50%;
					color: #ef5e25;
					font-weight: bold;
				}

				.sum {
					font-size: 22rpx;
					margin-top: 6rpx;
					color: #71797f;
				}
			}

			.text {
				line-height: 40rpx;
				font-size: 28rpx;
				margin: 10rpx;
				padding: 0 6rpx 0 2rpx;
				overflow: hidden; //超出部分隐藏
				text-overflow: ellipsis; //文字隐藏部分显示省略号
				display: -webkit-box; //改变盒子模型
				-webkit-line-clamp: 1; //文字显示几行
				-webkit-box-orient: vertical;
			}

			.img {
				width: 92%;
				height: 350rpx;
				border-radius: 10rpx;
			}
		}

		.title {
			display: flex;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			// padding-left: 40%;
			color: #ef5e25;
		}



	}
</style>
